<template>
    <div class="classList-container">
        <el-card style="height: 80px;margin-right: 3%;" class="header">
            <el-form>
                <el-form-item label="id:">
                    <el-input style="width: 300px" placeholder="请输入您的id" v-model="queryId" />
                    <el-button type="primary" icon="Search" class="search" :disabled="queryId ? false : true"
                        @click="queryTeacher">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-right: 3%;">
            <el-button type="primary" icon="Plus" @click="addData">添加教师</el-button>
            <el-table :data="tableData" border style="width: 100%;" class="Table">
                <el-table-column type="index" label="序号" width="80" align="center" />
                <el-table-column prop="id" label="ID" align="center" />
                <el-table-column label="教师名字" prop="teacherName" align="center"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
                <el-table-column label="教师职称" prop="post" align="center"></el-table-column>
                <el-table-column prop="performance" label="薪资" align="center" />
                <el-table-column label="操作" align="center" width="220">
                    <template #="{ row }">
                        <el-button type="primary" icon="Edit" @click="editData(row)">编辑</el-button>
                        <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" icon="InfoFilled"
                            icon-color="#626AEF" :title="`你确定要删除${row.teacherName}吗？`"
                            @confirm="deleteGoodsData(row.id)">
                            <template #reference>
                                <el-button type="danger" style="margin-right: 12px" icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[4, 6, 8, 10]"
                :background=true class="Pagination" layout=" prev, pager, next, jumper,->,sizes,total"
                :total="totallTeacher" @change="getMemberInfo(currentPage, pageSize)" />
        </el-card>
        <el-dialog v-model="dialogApear" :title="addvari ? '添加教师信息' : '修改教师信息'" width="800">
            <el-form :model="form" label-width="80px" style="width:80%;margin-left: 30px" :rules="formRule" ref="Form">
                <el-form-item label="教师姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入教师姓名" />
                </el-form-item>
                <el-form-item label="教师职称" prop="post">
                    <el-radio-group v-model="form.post" class="ml-4" @change="abc">
                        <el-radio value="1" size="large" >讲师及以下</el-radio>
                        <el-radio value="2" size="large" >教授、副教授</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="canceltDialogData">取消</el-button>
                <el-button type="primary" @click="submitDialogData">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang='ts'>
import { nextTick } from "vue";
import { setTeacher } from "@/stores/modules/teacher";
import { ref, onBeforeMount } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
//教师信息的存放地
let tableData: any = ref([]);
//搜索表单数据
let queryId = ref<number>()
//搜索教师
const queryTeacher = async () => {
    let res = await teacherStore.queryMember(queryId.value as number)
    tableData.value = [res]

}
const abc = ()=>{
    console.log(form.value.post)
}
let teacherStore = setTeacher()
const currentPage = ref<number>(1)
const pageSize = ref<number>(4)
//记录修改用户的id
let recordId = ref<number>()
//添加与修改教师信息对话框的文字
let addvari = ref<boolean>(true)


//教师信息

let totallTeacher = ref<number>(1)
const getMemberInfo = async (currentPage: number, pageSize: number) => {

    let res = await teacherStore.memberInfo(currentPage, pageSize)
    let arr:any = []
    arr = res.rows
    arr.forEach((item:any) => {
        if(item.post==1){
            item.post = '讲师及以下'
        }
        if(item.post ==2){
            item.post = '教授、副教授'
        }
    });
    tableData.value = res.rows
    totallTeacher.value = res.total

}
//element-plus 表单对象实例
let Form = ref()
//校验表单
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('教师姓名不能为空'))
    } else {
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error(addvari.value ? '教师职称不能为空' : '教师薪资不能为空'))
    }
    else {
        callback()
    }
}
const formRule = ref<FormRules<typeof form>>({
    name: [{ validator: validatePass, trigger: 'blur' }],
    post: [{ validator: validatePass2, trigger: 'blur' }],

})
onBeforeMount(() => {
    getMemberInfo(currentPage.value, pageSize.value)
})
//对话框的显示于隐藏
let dialogApear = ref<boolean>(false)
//添加教师
const addData = () => {
 
    addvari.value = true
    dialogApear.value = true
    //第一次点击添加新品牌时，el-form组件还没有，所以是undefined，undefined身上没有clearValidate方法，会报错
    //第一种写法：ts的问号写法
    // formRef.value?.clearValidate('logoUrl')
    // formRef.value?.clearValidate('tmName')
    //第二种写法：nextTick
    nextTick(() => {
        Form.value.clearValidate("name")
        Form.value.clearValidate("post")
    })
    form.value.name = ''
    form.value.post = ''

}

//发送添加教师的请求
const addTeacher = async () => {
    await teacherStore.addMember(form.value)

}
//发送修改教师的请求
const editTeacher = async () => {
    await teacherStore.editMeber((recordId.value as number), form.value)
}
//添加教师的信息
let form = ref({
    name: '',
    post: ''
})
//取消添加或修改
const canceltDialogData = () => {
    dialogApear.value = false
}
//确认添加或修改
const submitDialogData = async () => {
    await Form.value.validate()
    dialogApear.value = false

    if (addvari.value) {
        await addTeacher()
        await getMemberInfo(currentPage.value, pageSize.value)
    } else {
        await editTeacher()
        await getMemberInfo(currentPage.value, pageSize.value)
    }
}
//删除教师信息
const deleteGoodsData = async (id: number) => {

    await teacherStore.delMember(id)
    await getMemberInfo(currentPage.value, pageSize.value)

}
//编辑教师信息
const editData = (item: any) => {
   
    addvari.value = false
    dialogApear.value = true
    nextTick(() => {
        Form.value.clearValidate("name")
        Form.value.clearValidate("post")
    })
    
    form.value.name = item.teacherName
    form.value.post = item.post.toString()
    recordId.value = item.id
    
}
</script>

<style lang="scss" scoped>
.header {
    margin-bottom: 20px;

    .search {
        margin-left: auto;
    }
}

.Table {
    margin-top: 18px;
}

.Pagination {
    margin-top: 12px;
}
</style>